/* http://www.menucool.com */

/*slider frame*/
#sliderFrame
{
    width: 957px;
    margin: 0 auto; /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
    padding: 20px;
    box-shadow: 0 0 5px #BBB;
    border: 1px solid #CCC;
    background-color: #FFF;
}

#slider
{
    float: left;
    width: 630px;
    height: 303px; /* Make it the same size as your images. */
    background: #fff url(loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto; /*make the image slider center-aligned */
}

#slider img
{
    position: absolute;
    border: none;
    visibility: hidden;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink
{
    z-index: 2;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2
{
    position: absolute;
    width: 400px;
    height: auto;
    padding: 10px;
    left: 120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: 10px; /*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    z-index: 3;
    overflow: hidden;
    font-size: 0;
}
div.mc-caption-bg
{
    background: #1E3B65; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/
    border: 0px solid white;
    border-radius: 5px;
}
div.mc-caption
{
    font: bold 16px/19px sfufuturalight;
    color: #FFFFFF;
    z-index: 4;
    text-align: center;
    text-transform: uppercase;
}
div.mc-caption a
{
    color: #060;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
div.navBulletsWrapper
{
    display: none;
}


/*thumbnails*/
#thumbs
{
    float: left;
    margin-left: 16px;
    width: 310px;
    font: normal 11px/13px Arial;
    border-top: 1px solid #CCC;
    color: #666;
}
#thumbs .thumb
{
    border: 1px solid #CCC;
    border-top: 1px solid #FFF;
    padding: 11px 8px;
    background: #EEE;
}
#thumbs .thumb-on
{
    background: #FFF;
}

#thumbs img
{
    border: 1px solid #DDD;
    cursor: pointer;
    width: 70px;
    height: 44px;
}

#thumbs .frame
{
    float: left;
    padding: 2px;
    border: 1px solid #CCC;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 3px #BBB;
    font-size: 0;
    line-height: 0;
}
#thumbs .thumb-content
{
    float: left;
    width: 190px;
    padding-left: 18px;
}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p
{
    font-family: sfufuturalight;
    font-size: 1.3em;
    line-height: 17px;
    font-style: normal;
    font-weight: bold;
    color: #1E3B65;
    margin: 0 0 3px;
    padding: 0;
}

#thumbs .thumb-content p a
{
    color: #1E3B65;
}

#thumbs .thumb-on .thumb-content p
{
    color: #BB0000;
}


/* --------- Others ------- */
#slider
{
    transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

